<div class="ngm-story__story-container flex w-full h-full"
    [class.editable]="editable()"
    [ngStyle]="storySizeStyles()"
    ngmTransformScale
    [ngmTransformDisabled]="editable()"
    >
    <mat-tab-group #pageTabs class="ngm-story__point-tab-group w-full h-full" disableRipple preserveContent
        [attr.mat-align-tabs]="pageHeaderAlignTabs()"
        [mat-stretch-tabs]="pageHeaderStretchTabs()"
        [ngStyle]="storyStyle()"
        [class.tabBarHidden]="tabHidden()"
        [selectedIndex]="currentPageIndex()"
        [headerPosition]="pageHeaderPosition()"
        [fitInkBarToContent]="pageHeaderFitInkBarToContent()"
        (selectedTabChange)="onSelectedTabChange($event)"
        (click)="onSelectedIndex(pageTabs.selectedIndex)"
    >
      @for (point of displayPoints(); track point.key; let i = $index; let isLast = $last; let isFirst = $first;) {
        <mat-tab bodyClass="ngm-story__point-tab">
            <ng-template matTabLabel>
                <div class="relative flex items-center">
                  @if (story_point.dirtySignal()) {
                    <span class="absolute top-0 -left-2 w-2 h-2 bg-yellow-500 rounded-full"></span>
                  }

                    <span [ngClass]="{'ngm-story--point-hidden': point.hidden && editable()}">{{ point.name }}</span>
                    
                    <button *ngIf="editable()" mat-icon-button disableRipple displayDensity="cosy" class="ngm-story-point__tab-menu-trigger"
                        (click)="$event.preventDefault();$event.stopPropagation()"
                        [cdkMenuTriggerFor]="pageMenu"
                        [cdkMenuTriggerData]="{point: point, component: story_point}"
                        #mt="cdkMenuTriggerFor"
                        [class.active]="mt.isOpen()"
                    >
                        <mat-icon>more_vert</mat-icon>
                    </button>
                </div>
            </ng-template>
            
            <ngm-story-point #story_point class="ngm-color"
                cdkDrag
                [cdkDragDisabled]="disablePanMode$ | async"
                [class.cursor-grab.select-none]="isPanMode$ | async"
                [ngStyle]="pageStyle()"
                [ngClass]="point.styling?.background ? 'ngm-color__' + point.styling.background : ''"
                [key]="point.key"
                [editable]="editable()"
                [opened]="i === pageTabs.selectedIndex"
                [focus]="(focusPage() && point.key === focusPage()) ? widgetKey : (i === 0 ? widgetKey : null)"
                [isFirst]="isFirst"
                [isLast]="isLast"
                (navToPointIndex)="onSelectedIndex($event)"
            >
            </ngm-story-point>
        </mat-tab>
      }
    </mat-tab-group>

    <!-- 暂时没时间实现 global filters 功能
    <button mat-icon-button class="ngm-story__global-filter z-[100]"
        [popper]="gFilters"
        [popperTrigger]="NgxPopperjsTriggers.click"
        [popperHideOnClickOutside]="true"
        [popperHideOnScroll]="true"
        [popperHideOnMouseLeave]="false"
        [popperPlacement]="NgxPopperjsPlacements.TOPEND">
        <mat-icon fontSet="material-icons-round">filter</mat-icon>
    </button> -->
</div>

  
@if (enableWatermark$()) {
  <ngm-trial-watermark [options]="watermarkOptions$()"/>
}

<ng-template #pageMenu let-point="point" let-component="component">
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem [disabled]="!component?.dirtySignal()" (click)="saveStoryPoint(point.key)">
        <mat-icon fontSet="material-icons-outlined">save</mat-icon>
        {{ 'Story.Story.Save' | translate: {Default: "Save"} }}
    </button>

    <button cdkMenuItem (click)="duplicateStoryPoint(point.key)">
        <mat-icon>content_copy</mat-icon>
        {{ 'Story.Story.Duplicate' | translate: {Default: "Duplicate"} }}
    </button>
    <button cdkMenuItem (click)="component?.rename()">
        <mat-icon fontSet="material-icons-outlined">drive_file_rename_outline</mat-icon>
        {{ 'Story.Story.Rename' | translate: {Default: "Rename"} }}
    </button>

    <mat-divider></mat-divider>

    <button cdkMenuItem *ngIf="!point.hidden" (click)="toggleStoryPointHidden(point.key)">
        <mat-icon>flip_to_back</mat-icon>
        {{ 'Story.Story.Hidden' | translate: {Default: "Hidden"} }}
    </button>
    <button cdkMenuItem *ngIf="point.hidden" (click)="toggleStoryPointHidden(point.key)">
        <mat-icon>flip_to_front</mat-icon>
        {{ 'Story.Story.Visiable' | translate: {Default: "Visiable"} }}
    </button>
    <button cdkMenuItem [disabled]="component?.isFirst" (click)="move(point, 'left')">
        <mat-icon>chevron_left</mat-icon>
        {{ 'Story.Story.MOVE_LEFT' | translate: {Default: "Move Left"} }}
    </button>
    <button cdkMenuItem [disabled]="component?.isLast" (click)="move(point, 'right')">
        <mat-icon>chevron_right</mat-icon>
        {{ 'Story.Story.MOVE_RIGHT' | translate: {Default: "Move Right"} }}
    </button>
    <button cdkMenuItem [disabled]="component?.isFirst" (click)="move(point, 'first')">
        <mat-icon>first_page</mat-icon>
        {{ 'Story.Story.MOVE_FIRST' | translate: {Default: "Move First"} }}
    </button>
    <button cdkMenuItem [disabled]="component?.isLast" (click)="move(point, 'last')">
        <mat-icon>last_page</mat-icon>
        {{ 'Story.Story.MOVE_LAST' | translate: {Default: "Move Last"} }}
    </button>

    <mat-divider></mat-divider>
    <!-- <button cdkMenuItem >
        <mat-icon>comment</mat-icon>
        {{ 'Story.Story.COMMENT' | translate: {Default: "Comment"} }}
    </button> -->
    <button cdkMenuItem (click)="openShare(point)">
        <mat-icon fontSet="material-icons-outlined">share</mat-icon>
        {{ 'Story.Story.Share' | translate: {Default: "Share"} }}
    </button>

    <mat-divider></mat-divider>

    <button cdkMenuItem class="ngm-cdk-menu__danger" color="warn" ngmAppearance="danger"
        (click)="removeStoryPoint(point)">
        <mat-icon>delete_forever</mat-icon>
        {{ 'Story.Story.Delete' | translate: {Default: "Delete"} }}
    </button>
  </div>
</ng-template>

<div *ngIf="tabIsPoint()" class="ngm-story__pagination ngm-story__pagination-bullets px-8"
    [class.ngm-story__pagination-header-below]="pageHeaderPosition() === 'below'"
    [attr.mat-align-tabs]="pageHeaderAlignTabs()"
    [attr.mat-stretch-tabs]="pageHeaderStretchTabs()"
>
    <div class="ngm-story__pagination-horizontal overflow-auto whitespace-nowrap pointer-events-auto flex flex-wrap justify-start items-center
        rounded-lg px-2 py-1 bg-slate-500/10 backdrop-blur-md">
      @for (point of displayPoints(); track point.id; let index = $index;) {
        <div class="ngm-story__pagination-page flex items-center cursor-pointer group hover:underline pointer-events-auto"
            (click)="storyService.setCurrentPageKey(point.key)"
        >
            <div class="ngm-story__pagination-bullet shrink-0 inline-block w-4 h-4 rounded-full mx-1 opacity-50 group-hover:opacity-100"
                [class.ngm-story__pagination-bullet-active]="point.key === currentPageKey()"
                [matTooltip]="point.name"
                >
            </div>
          @if ((!pageHeaderShowLabel() || pageHeaderShowLabel() === PageHeaderLabelEnum.auto) && point.key === currentPageKey()
            || pageHeaderShowLabel() === PageHeaderLabelEnum.always || pageHeaderShowLabel() === true) {
            <div class="inline-block dark:text-white">
              {{point.name}}
            </div>
          }
          @if (editable() && point.key === currentPageKey()) {
            <button class="px-1 rounded-md hover:bg-hover-bg" [cdkMenuTriggerFor]="pageMenu"
                [cdkMenuTriggerData]="{point: point}"
                #mt="cdkMenuTriggerFor"
                [class.active]="mt.isOpen()">
                <i class="ri-more-line"></i>
            </button>
          }
        </div>
      }
    </div>
</div>

<ng-content></ng-content>